<template>
    <div >
        <div>

        </div>
        <ul>
            <il class="box-il"  v-for="(val, index) in productList">
                <div class="box">
                    <img  src="http://127.0.0.1:9014/img/collect.png"/>
                    <div class="productInfo">
                        <span>名称：{{val.name}}</span><br/>
                        <span>当前库存：{{val.num}}</span>
                        <br/>
                        <div class="but">
                        <el-button type="danger"  round>购买</el-button>
                        <el-button type="danger"  round>加入购物车</el-button>
                        </div>
                    </div>
                </div>
            </il>
        </ul>
    </div>
</template>

<script>
    import {AllProductList} from "@/api/shopping";

    export default {
        name: "shopping",
        data(){
            return{
                productList:""
            }
        },
        methods:{
            getList(){
                AllProductList().then(response => {
                    const { data } = response
                    if(data.code  == '200'){
                       this.productList = data.data
                    }else{
                        alert("服务器错误，请从新刷新页面！");
                    }
                })
            }
        },
        mounted(){
            this.getList()
        }
    }
</script>

<style scoped>
    .box-il{
        float: left;
        padding: 10px;
    }
    .box{
        width: 200px;
        height: 350px;
        background-color: #fcfcfc;
    }
    .box img{
        width: 180px;
        height: 250px;
        padding-top: 5px;
    }
    .productInfo{
        width: 200px;
        height: 50px;
    }
    .but{
        padding-top: 7px;
    }
</style>
